<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="common-nav-bar">
      <van-button
        class="search-btn"
        icon="search"
        slot="title"
        type="info"
        round
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- 标签栏 -->
    <van-tabs class="channel-tabs" v-model="active" color="#3296fa" >
      <van-tab
        class="channel-tabs-item"
        v-for="item in channelList"
        :title="item.name"
        :key="item.id"
      >
        <article-list :channelInfo="item"></article-list>
      </van-tab>
      <!-- 弹出窗按钮 -->
      <div
        slot="nav-right"
        class="channel-nav-right"
        @click="isChannelEditDialog = true"
      >
        <van-icon name="wap-nav" />
      </div>
      <!-- 标签预留多余的空间，防止弹出窗按钮遮挡部分标签元素 -->
      <div slot="nav-right" class="channel-nav-right-more"></div>
    </van-tabs>
    <!-- 弹出框 -->
    <van-popup
      class="channel-popup"
      v-model="isChannelEditDialog"
      position="bottom"
      round
      closeable
      close-icon-position="top-left"
      :style="{ height: '90%' }"
    >
      <channel-edit
        :myChannelList="channelList"
        :active="active"
        @channelClosed="switchTabs"
        @channelUpdated="updateTabs"
      />
    </van-popup>
  </div>
</template>

<script>
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit'
import { getItem, KEY_MAP } from '@/utils/storage'
import { apiGetChannelData } from '@/api/user'
import { mapState } from 'vuex'
export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data() {
    return {
      active: 0,
      channelList: [],
      isChannelEditDialog: false
    }
  },
  created() {
    this.getChannelData()
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    async getChannelData() {
      let tempChannelList = []

      // 如果登录了，线上获取
      if (this.user) {
        const { data } = await apiGetChannelData()
        tempChannelList = data.data.channels
      } else if (getItem(KEY_MAP.MY_CHANNEL)) {
        // 未登录，本地有
        tempChannelList = getItem(KEY_MAP.MY_CHANNEL)
      } else {
        // 未登录，本地也没有，直接网络获取默认列表
        const { data } = await apiGetChannelData()
        tempChannelList = data.data.channels
      }

      this.channelList = tempChannelList
    },
    switchTabs(index) {
      // 如果要删除的 index 小于当前激活的 active，直接删除会导致当前激活项顺移到下一位
      this.active = index
      this.isChannelEditDialog = false
    },
    updateTabs(index) {
      // 当删除 激活项之前的元素，删除后，将激活项的 active 往前移一个元素
      if (index < this.active) {
        this.active = this.active - 1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .van-nav-bar .van-icon {
    color: #ffffff;
  }
  .search-btn {
    width: 277px;
    height: 32px;
    background-color: #5babfb;
    border: none;

    .van-button__icon {
      font-size: 16px;
    }
    .van-button__text {
      font-size: 14px;
    }
  }

  .channel-tabs {
    .channel-tabs-item {
    }
    .channel-nav-right {
      position: fixed;
      right: 0;
      width: 34px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      opacity: 0.9;
      .van-icon {
        font-size: 16px;
      }
      &::before {
        content: '';
        width: 1px;
        height: 42px;
        background: url('./channel-btn-left-border.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 0;
      }
    }
    .channel-nav-right-more {
      flex-shrink: 0;
      width: 34px;
      // height: 42px;
    }
  }
  .channel-popup {
  }
}
</style>
